<template>
  <view class="order-detail">
    <navbar title="选材详情"/>
    <view class="title-label mt-20">订单信息</view>
    <view class="cell-group">
      <view class="cell">
        <view class="label">下单用户</view>
        <view class="value">
          <text class="name">{{ userInfo.realname }}</text>
          <text class="mobile ml-10">{{$utils.phoneStar(userInfo.phone)}}</text>
        </view>
      </view>
      <view class="cell">
        <view class="label">订单编号</view>
        <view class="value">{{ order.no }}</view>
      </view>
      <view class="cell">
        <view class="label">下单时间</view>
        <view class="value">{{order.date}}</view>
      </view>
      <view class="cell">
        <view class="label">订单金额</view>
        <view class="value">￥{{order.totalPrice}}</view>
      </view>
    </view>
    <view class="title-label mt-20">选材列表</view>
    <view class="list">
      <view class="item" v-for="item in goodsList">
        <c-image :src="item.imageUrl" width="150rpx" height="150rpx" radius="16rpx" mode="aspectFill"/>
        <view class="info">
          <view class="name-info">
            <text class="name">{{ item.spuName }}</text>
            <text class="num muted">x{{ item.quantity }}</text>
          </view>
          <!--<view class="no">DZ01214545</view>-->
          <view class="flex row-between">
            <view class="sku" v-if="item.skuNo">{{ item.skuNo }}</view>
            <view class="price">￥{{ item.price }}</view>
          </view>
        </view>
      </view>
    </view>
    <u-safe-bottom/>
  </view>
</template>

<script>
import {orderDetail, orderGoodsDetail} from "@/api/my";
import {mapGetters} from "vuex";
export default {
  data() {
    return {
      order: {},
      goodsList: [],
    };
  },
  computed: {
    ...mapGetters(["userInfo"])
  },
  methods: {
    getDetail() {
      orderGoodsDetail({id: this.id}).then(res => {
        console.log(res);
        this.order = uni.getStorageSync("orderDetail");
        this.goodsList = res
      })
    },
  },
  onLoad(options) {
    this.id = options.id;
    this.getDetail();
  }
}
</script>


<style lang="scss">
@import "@/static/styles/minix.scss";

page {
  background: #fff;
}
.title-label {
  font-size: 28rpx;
  margin-left: 20rpx;
  font-weight: bold;
  padding-left: 10rpx;
  position: relative;
  &:before {
    content: "";
    position: absolute;
    top: 50%;
    left: -4rpx;
    transform: translateY(-50%);
    width: 4rpx;
    height: 28rpx;
    background: #000;
  }
}
.cell-group {
  padding: 0 20rpx;
  margin-top: 10rpx;
  .cell {
    @include flex-between;
    padding: 10rpx 0;
    .label {
      color: $-color-gray;
    }
    .value {
     }
  }
}
.list {
  padding: 0 20rpx;
  margin-top: 10rpx;
  .item {
    position: relative;
    display: flex;
    align-items: stretch;
    margin-top: 20rpx;

    .c-image {
      margin-right: 20rpx;
    }

    .info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      .name-info {
        @include flex-between;
        font-size: 24rpx;
        .name {
          font-weight: bold;
        }
      }

      .no, .sku {
        font-size: 24rpx;
        color: $-color-muted;
      }
      .sku {
        background: #f4f4f4;
        font-size: 24rpx;
        color: #565656;
        padding: 4rpx 10rpx;
        border-radius: 4rpx;
        width: max-content;
      }
      .price {
        color: #e0b883;
        margin-right: 10rpx;

        text {
          font-size: 30rpx;
        }
      }
    }
  }
}
</style>
